I have a menu bar which overlays a body scroll in my PWA with styling:
position: fixed;
bottom: 0px;
This works fine after launching the PWA. In addition to scrolling my app also has a dialog overlay which is invoked many times during regular use.
The bug: After a few hours of mixed use and backgrounding the app, the position fixed bottom does not stick to the bottom of the page when scrolled down. It is almost as if there is an invisible Safari navbar that pushes the viewport up (the PWA forgets it's not in Safari? :)).
On scroll down With the dialog open
This one is a bit tedious, but I am able to consistently reproduce it on my app following these steps and with also with a stripped down HTML:
- Create a PWA app on a iOS17 device with the following html:
https://github.com/apsm100/ios17-pwa-position-fixed-bug/blob/main/index.html
- Open the app and open and close the dialog a few times.
- Leave the app open in the background for a few hours and periodically open it up to test scrolling up and down and opening and closing the dialog.
- Eventually you will see the bug.
I am not entirely sure if the dialog has any role in this, I haven't gotten that far in testing. Since I use my app daily I would say it happens about after an hour of backgrounding and a few minutes of use.
Thank you!